<template>
    <div class="user-loan-detail">
        <div class="header">
            <div class="header__item purple" @click='setTabIndex(0)' :class="{'active':tabIndex == 0}">
                <p>{{info.totalWaitReceiveAmount | toYuan}}</p>
                <span>总待收</span>
            </div>
            <div class="header__item purple" @click='setTabIndex(1)' :class="{'active':tabIndex == 1}">
                <p>{{info.recent7DayWaitReceiveAmount | toYuan}}</p>
                <span>7天待收</span>
            </div>
            <div class="header__item purple" @click='setTabIndex(2)' :class="{'active':tabIndex == 2}">
                <p>{{info.recent30DayWaitReceiveAmount | toYuan}}</p>
                <span>30天待收</span>
            </div>
            <div class="header__item purple" @click='setTabIndex(3)' :class="{'active':tabIndex == 3}">
                <p>{{info.overdueWaitReceiveAmount | toYuan}}</p>
                <span>已逾期</span>
            </div>
        </div>
        <div class="wrapper">
            <div class="user-no-repayment-box">
                
                <div class="main">

                    <loading-more
                        v-model='loading1'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitReceiveList'
                        :show='show1'
                        @complete='complete1 = true'
                        @finish='setRecords1'
                        v-show='tabIndex == 0'>
                        <div class="tab__item" v-for='item in records1'>
                            <div class="card nail2" @click='goIOU(item.borrowNo)'>
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar || placeholderImg" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>{{item.user.mobile}}</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">出借日期：{{item.borrow.borrowAt | dateFormat}}</li>
                                    <li class="card__info-item">借款用途：{{item.borrow.borrowUsage}}</li>
                                    <li class="card__info-item">最近收款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">逾期期数：{{item.overdueCount}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text purple">待收 (元)</span>
                                        <p class="loan-current__number purple">{{item.receiveAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button purple" @click.stop='remindRepay(item.repayPlanId)'>提醒还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading1' :size='15' mode='absolute'></loading>
                        <p class='user-list-explain' v-show='complete1 && records1.length'>以上为全部总待收</p>
                        <p class='page-placeholder' v-show='complete1 && !records1.length'><span>暂无总待收</span></p>
                    </loading-more>

                    <loading-more
                        v-model='loading2'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitReceiveList'
                        :params='{recentDay:7}'
                        @complete='complete2 = true'
                        @finish='setRecords2'
                        :show='show2'
                        v-show='tabIndex == 1'>
                        <div class="tab__item" v-for='item in records2' @click='goIOU(item.borrowNo)'>
                            <div class="card nail2">
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar || placeholderImg" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>{{item.user.mobile}}</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">出借日期：{{item.borrow.borrowAt | dateFormat}}</li>
                                    <li class="card__info-item">借款用途：{{item.borrow.borrowUsage}}</li>
                                    <li class="card__info-item">最近收款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">逾期期数：{{item.overdueCount}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text purple">待收 (元)</span>
                                        <p class="loan-current__number purple">{{item.receiveAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button purple" @click.stop='remindRepay(item.repayPlanId)'>提醒还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading2' :size='15' mode='absolute'></loading>
                        <p class='user-list-explain' v-show='complete2 && records2.length'>以上为全部7日待收</p>
                        <p class='page-placeholder' v-show='complete2 && !records2.length'><span>暂无7日待收</span></p>
                    </loading-more>
                    
                    <loading-more
                        v-model='loading3'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitReceiveList'
                        :params='{recentDay:30}'
                        @complete='complete3 = true'
                        @finish='setRecords3'
                        :show='show3'
                        v-show='tabIndex == 2'>
                        <div class="tab__item" v-for='item in records3' @click='goIOU(item.borrowNo)'>
                            <div class="card nail2">
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar || placeholderImg" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>{{item.user.mobile}}</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">出借日期：{{item.borrow.borrowAt | dateFormat}}</li>
                                    <li class="card__info-item">借款用途：{{item.borrow.borrowUsage}}</li>
                                    <li class="card__info-item">最近收款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">逾期期数：{{item.overdueCount}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text purple">待收 (元)</span>
                                        <p class="loan-current__number purple">{{item.receiveAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button purple" @click.stop='remindRepay(item.repayPlanId)'>提醒还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading3' :size='15' mode='absolute'></loading>
                        <p class='user-list-explain' v-show='complete3 && records3.length'>以上为30日待收</p>
                        <p class='page-placeholder' v-show='complete3 && !records3.length'><span>暂无30日待收</span></p>
                    </loading-more>
                    
                    <loading-more
                        v-model='loading4'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitReceiveList'
                        :params='{isOverdue:1}'
                        @complete='complete4 = true'
                        @finish='setRecords4'
                        :show='show4'
                        v-show='tabIndex == 3'>
                        <div class="tab__item" v-for='item in records4' @click='goIOU(item.borrowNo)'>
                            <div class="card nail2">
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar || placeholderImg" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>{{item.user.mobile}}</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">出借日期：{{item.borrow.borrowAt | dateFormat}}</li>
                                    <li class="card__info-item">借款用途：{{item.borrow.borrowUsage}}</li>
                                    <li class="card__info-item">最近收款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">逾期期数：{{item.overdueCount}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text purple">待收 (元)</span>
                                        <p class="loan-current__number purple">{{item.receiveAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button purple" @click.stop='remindRepay(item.repayPlanId)'>提醒还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading4' :size='15' mode='absolute'></loading>
                        <p class='user-list-explain' v-show='complete4 && records4.length'>以上为全部已逾期</p>
                        <p class='page-placeholder' v-show='complete4 && !records4.length'><span>暂无已逾期</span></p>
                    </loading-more>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { userApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,
            loadingMore
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                placeholderImg:require('../images/loading_1.png'),
                placeholder:'--',
                tabIndex:0,
                info:{},
                records1:[],
                records2:[],
                records3:[],
                records4:[],
                show1:true,
                show2:false,
                show3:false,
                show4:false,
                complete1:false,
                complete2:false,
                complete3:false,
                complete4:false,
                loading1:true,
                loading2:true,
                loading3:true,
                loading4:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function

            withinOneDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = Math.ceil(diff.diff(now,'days'))
                if(diffDays < 0) return true
                return diffDays
            },
            getInfo(){
                this.showLoading()
                userApi.waitReceiveInfo()
                .then(result=>{
                    this.hideLoading()
                    this.info = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            setRecords1(records){
                this.records1 = records
            },
            setRecords2(records){
                this.records2 = records
            },
            setRecords3(records){
                this.records3 = records
            },
            setRecords4(records){
                this.records4 = records
            },
            setTabIndex(num){
                this.tabIndex = num
                $('.wrapper').scrollTop(0)

                let showStr = `show${num+1}`
                this.show1 = false
                this.show2 = false
                this.show3 = false
                this.show4 = false
                this[showStr] = true
            },
            goIOU(no){
                this.$router.push({
                    name:'loan-IOU',
                    params:{
                        number:no
                    }
                })
            },
            remindRepay(id){
                this.showLoading()
                userApi.remindRepay({
                    repayPlanId:id
                })
                .then(result=>{
                    this.hideLoading()
                    this.setMsgTip({
                        text:'提醒还款成功！',
                        type:'success'
                    })
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){
            this.getInfo()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
</style>
